<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useGlobalStore } from "@/stores/module/global";
import { useTheme } from "@/hooks/useTheme";
const globalStore = useGlobalStore();
const { isDark } = storeToRefs(globalStore);
const isRouterAlive = ref(true);
const font = reactive({
  color: "rgba(0, 0, 0, .15)",
});

watch(
  isDark,
  () => {
    font.color = isDark.value
      ? "rgba(255, 255, 255, .15)"
      : "rgba(0, 0, 0, .15)";
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss">
body {
  overflow: hidden;
  background-color: var(--el-bg-color-page);
}
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-variant: tabular-nums;
  color: var(--el-text-color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  .env_tag {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 901;
    padding: 0 6px;
    font-size: 12px;
    color: #ffffff;
    background-color: red;
    border-radius: 0 0 0 4px;
  }
}
</style>
